<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
    <title>Jquery基本过滤器</title>
</head>

<body>

<div id="msg">使用ID选择该元素</div>

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<ul id="myul">
    <li>item1</li>
    <li class="selected">item2</li>
    <li>item3</li>
    <li class="selected">item4</li>
</ul>

<table border="1" id="mytable" cellpadding="0" cellspacing="0" width="400">
    <thead>
    <tr>
        <th></th>
        <th>序号</th>
        <th>姓名</th>
        <th>邮件</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" id="aselect_1"/></td>
        <td>1</td>
        <td>张三</td>
        <td>zhangsan@520it.com</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="bselect_2"/></td>
        <td>2</td>
        <td>李四</td>
        <td>lisi@520it.com</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="select_3"/></td>
        <td>3</td>
        <td>王五</td>
        <td>wangwu@520it.com</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="select_4"/></td>
        <td>4</td>
        <td>赵六</td>
        <td>zhaoliu@520it.com</td>
    </tr>
    </tbody>
</table>

<div class="question">
    <li>问题一：请得到ul第一个li元素(:first)；<br>
        $("ul li:first").css("background-color","red")
    </li>
    <li>问题二：请得到每一个ul的第一个li元素(:first-child)；<br>
        $("ul li:first-child").css("background-color","red")
    </li>
    <li>问题三：得到ul最后一个li元素；<br>
        $("ul li:last").css("background-color","red")
    </li>
    <li>问题四：得到每一个ul元素的最后一个li元素(:last-child)；<br>
        $("ul li:last-child").css("background-color","red")
    </li>
    <li>问题五：得到奇数/偶数位li元素(:odd/:even)；<br>
        $("ul li:odd").css("background-color","red")<br>
        $("ul li:even").css("background-color","red")<br>
    </li>
    <li>问题六：得到每一个ul元素的奇数/偶数位li元素(:nth-child)；<br>
        $("ul li:nth-child(2n)").css("background-color","red")
    </li>
    <li>问题七：表格隔行变色；<br>
        $("tbody tr:nth-child(2n+1)").css("background-color","gray")<br>
        $("tbody tr:nth-child(2n)").css("background-color","red")
    </li>
    <li>问题八：选择所有id属性值以select_开头的checkbox([attribute^=value])；<br>
        $("tbody input:checkbox[id^=select]")
    </li>
</div>
</body>

</html>